<template>
    <hr />
    <br />User子组件
    <div>username:{{ username }}</div>
    <div>age:{{ age }}</div>
    <div>description:{{ description }}</div>
    <div>{{ des }}</div>
    <br />
    <button @click="changeAge()">点击 修改父组件年龄</button>
</template>

<script>

import { ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onBeforeUnmount, onUnmounted, } from 'vue';

export default {
    emits: ["updatedcount"],
    props: {
        username: {
            type: String,
            default: ''
        },
        age: {
            type: Number,
            default: 0
        },
        description: {
            type: String,
            default: ''
        }
    },

    setup(props, { emit }) {
        onBeforeMount(() => {
            console.log('onBeforeMount');
        })
        onMounted(() => {
            console.log('onMounted');
        })

        console.log('user:', props.username);
        const des = ref(props.username + '年龄是' + props.age);

        const changeAge = () => {
            emit('changeAge', props.age + 1)
        };

        return {
            des,
            changeAge
        }
    }
}
</script>
